<template>
  <view class="page">
    <view class="cbg"></view>
    <u-navbar  :custom-back="cuBack" :title="`${parkNum}区巡更轨迹记录`" :background="{}" back-icon-color="#fff" title-color="#fff" :border-bottom="false"></u-navbar>

    <view class="top-calendar">
      <text>西部食谷{{parkNum}}区</text>
      <view>{{ dateTxt}}</view>
    </view>


    <view class="top-op">
      <view class="top-op-item" @click="showDate=true">
        <u-icon name="clock" size="32" color="#fff" class="ca-down"></u-icon>
        <text>查看历史记录</text>
      </view>
      <view class="top-op-item" @click="navTo(`/pageSecurity/patrol/clockHistory?type=${parkNum}`)">
        <u-icon name="arrow-rightward" size="30" color="#fff" class="ca-down"></u-icon>
        <text>查看点位记录</text>
      </view>
    </view>



    <view class="xg-count">
      <view class="">
        <text>{{ allCount }}</text>
        <text>今日累计打卡</text>
      </view>
      <view class="">
        <text style="color: #F74D39;">{{ errCount }}</text>
        <text>异常点位</text>
      </view>
    </view>

    <view class="hist-box">
      <view style="background: #FFFFFF;padding: 48rpx 32rpx" v-if="clockList&&clockList.length>0">
        <view class="hist-item" v-for="(item,index) in clockList" :key="index">
          <view class="hist-col">
            <view class="hist-col-l">
              <div class="hist-circle"></div>
            </view>
            <view class="hist-col-r">
              <view class=hist-time>{{ item.time }}</view>
              <view class="hist-c" @click="navTo('/pageSecurity/patrol/clockInfo?formData='+item.formData)"  :style="{color: item.state=='异常'?'#F74D39':'',background:item.state=='异常'?'rgba(247,77,57,0.09)':''}">
                <view>
                  <u-icon name="map-fill" :color="item.state=='异常'?'#F74D39':'#B0B0B0'" size="28"></u-icon>
                  {{ item.qrCode }}
                </view>
                <view>
                  {{item.inspectionPerson}}
                </view>
                <view>
                  {{ item.inspectionTime.substring(0,10) }}
                </view>
                <view>
                  {{ item.state }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-calendar v-model="showDate" mode="date" @change="calendarFn"></u-calendar>
  </view>
</template>

<script>
import ComTopBar from "../../components/ComTopBar/ComTopBar";
export default {
  components: {ComTopBar},
  data() {
    return {
      showDate:false,
      clockList:null,
			parkNum:'A',
      dateTxt:this.$u.timeFormat(Date.now(),'yyyy年mm月dd日'),
      formDate:this.$u.timeFormat(Date.now()),
      headStyle: {
        marginBottom: '2rpx',
        borderRadius: '12rpx',
        background: '#fff',
        padding: '26rpx 32rpx',
        fontSize: '28rpx',
        color: '#333333'
      },
      bodyStyle: {
        background: '#FFFFFF',
        padding: '48rpx 32rpx'
      },
      allCount:0,
      errCount:0
    };
  },
	onLoad({type}) {
    this.parkNum=type
		this.getHistoryList()
	},
  methods:{
    cuBack(){
      this.navTo('/pages/comChilds/comChilds')
    },
    calendarFn(e){
      this.dateTxt= `${e.year}年${e.month}月${e.day}日`
      this.formDate=e.result
    },
    getHistoryList(){
      let date=this.formDate
      this.apis.securityApi.inspectionRecordList({
        inspectionTime:date,
        parkNum:this.parkNum
      }).then(res=>{
        let list=res.rows
        let errCount=0
        list.forEach((item,index,arr)=>{
          item.time=this.$u.timeFormat(item.inspectionTime,'hh:MM:ss')
          if (item.state!=='正常'){
            errCount+=1
          }
        })
        this.allCount=list.length
        this.errCount=errCount
        this.clockList=list
      })
    }
  }
}
</script>

<style lang="scss">
.xg-count {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 160rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  display: flex;
  margin-bottom: 20rpx;
  margin-top: 40rpx;
  view {
    flex: 1;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:first-child::after {
      position: absolute;
      top: 50%;
      right: 0;
      content: "";
      width: 2rpx;
      height: 60rpx;
      transform: translateY(-50%);
      background: #EEEEEE;
    }

    text:nth-child(1) {
      margin-bottom: 10rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      line-height: 42rpx;
    }

    text:nth-child(2) {
      font-size: 26rpx;
      font-weight: 500;
      color: #666666;
      line-height: 30rpx;
    }
  }
}

.top-op{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 92rpx;
  z-index: 2;
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;


  .ca-down{
    font-weight: 600;
    margin-top: 4rpx;
  }

  .top-op-item{
    border-radius: 200rpx;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid rgba(#FFFFFF,0.5);
    margin-left: 38rpx;
    text{
      margin-left: 10rpx;
    }
  }
}


.top-calendar{
	display: flex;
	align-items: center;
	justify-content: center;
  position: relative;
  width: 100%;
  height: 92rpx;
  z-index: 2;
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;

  text{
    padding-right: 20rpx;
  }

  .ca-down{
    font-weight: 600;
    margin-top: 8rpx;
    margin-left: 8rpx;
  }


}

.hist-box{
  position: relative;
  z-index: 2;
  border-radius: 12rpx;
  overflow: hidden;
}

.hist-item {
  width: 100%;
  position: relative;
  z-index: 2;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(13rpx);
    width: 2rpx;
    height: 100%;
    background: #EEEEEE;
    z-index: 0;
  }

  .hist-col {
    width: 100%;
    display: flex;

    .hist-col-l {
      height: 100%;
      width: 26rpx;
      position: relative;

      .hist-circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 26rpx;
        height: 26rpx;
        background: #FFFFFF;
        opacity: 1;
        border: 4rpx solid #44D94B;
        border-radius: 50%;
        z-index: 1;
      }
    }
  }

  .hist-col-r {
    width: 100%;
    margin-left: 20rpx;

    .hist-time {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      line-height: 33rpx;
    }

    .hist-c {
      margin: 20rpx 0;
      padding:20rpx;
      display: flex;
      font-size: 26rpx;
      font-weight: 500;
      color: #666666;
      width: 100%;
      background: #f8f8f8;
      border-radius: 12rpx;

      view:nth-child(2) {
        margin: 0 20rpx;
        width: 120rpx;
        text-align: center;
        position: relative;
        border-left: 2rpx solid #eee;
        border-right: 2rpx solid #eee;
      }
      view:nth-child(3) {
        width: 160rpx;
        border-right: 2rpx solid #eee;
        margin: 0 20rpx;
      }
      view:nth-child(4) {
        flex: 1;
        text-align: right;
      }
    }

    .info{
      margin-bottom: 30rpx;
      width: 100%;
      border-radius: 12rpx;
      background: rgba(247, 77, 57, 0.03);
      padding: 20rpx;
      color: #F74D39;
    }
  }

  .err {
    height: 232rpx;
  }

}

.cbg{
  position: absolute;
  top: 100rpx;
  left: -3rpx;
  width: 100%;
  z-index: 0;
  height: 400rpx;
  background: #17C25B;
  transform: scale(2.4);
  border-radius: 90%;
}
</style>
